<template>
	<view class="shop-detail">
		<u-navbar :border-bottom="false" title-size="35" title="商品详情"></u-navbar>
		<!-- <image class="detail-img" :src="detail.image_text"></image> -->
		<div class="full">
			<z-swiper :autoplay='autoplay' :list='list' :effect3d='effect3d' :fullScreen='fullScreen'
				:effect3dMargin='`${effect3dMargin}rpx`' :vertical='vertical' :topFloat='topFloat'
				:fotterFloat='fotterFloat' :mode='mode' :indicatorPos='indicatorPos'></z-swiper>
		</div>
		<view class="detail-cont">
			<!-- 积分 -->
			<view class="info">
				<view class="info-left">
					<view class="">抢购价:{{detail.group_price}}</view>
					<view class="">
						<text>健康值</text>
						<text>{{detail.need_total}}人团</text>
					</view>
				</view>
				<view class="info-right">{{detail.title}}</view>
			</view>
			<view class="puzzle">
				<view>销量：
					<text>{{detail.stock_sales}}</text>
				</view>
				<view>零售价：
					<text>{{detail.retailprice}}</text>
				</view>
			</view>

			<!-- 参与抢购 -->
			<view class="puzzle">
				<view class="puzzle-left" @click="quanb">
					<text>参与抢购</text>
					<view>
						<text>全部</text>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="puzzle-right" v-for="(item,index) in detail.team_list" :key="index"
					@click="goPuzzleDetail(item.id)">
					<image :src="item.avatar" mode=""></image>
					<view class="">
						<text>{{item.nickname}}</text>
						<text>仅差{{item.need_text}}人成团</text>
					</view>
					<text>抢购</text>
				</view>
			</view>
      
      <!-- 添加评论区域 -->
      <view class="comment-section">
        <view class="comment-header">
          <text class="title">商品评价</text>
          <view class="view-all" @click="goToCommentList">
            <text>查看全部</text>
            <u-icon name="arrow-right" color="#999" size="24"></u-icon>
          </view>
        </view>
        
        <view class="comment-empty">
          <text>暂无评价</text>
          <text class="hint">还没有人评价过该商品</text>
        </view>
        
        <view class="comment-stats">
          <view class="stat-item">
            <text class="value">0</text>
            <text class="label">评价总数</text>
          </view>
          <view class="stat-item">
            <text class="value">0%</text>
            <text class="label">好评率</text>
          </view>
        </view>
      </view>
      
			<!-- 抢购须知 -->
			<view class="notice">
				<u-parse :html="detail.rules"></u-parse>
			</view>
			<view class="cont-poster">
				<u-parse :html="detail.goodscontent_text" style="font-size: 0;"></u-parse>
			</view>
		</view>
		<!-- 立即发团 -->
		<view class="promptly" @click="gofat">
			<view>立即抢购</view>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="show" mode="center" width="580" height="766" border-radius="20">
			<view class="pop">
				<view class="pop-title">可参与的抢购</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<ul class="pop-cont">
						<li class="" v-for="(item2,index2) in allTeamList" :key="index2+'w'" @click="goPingt(item2)">
							<image :src="item2.avatar"></image>
							<view class="li-text">
								<view class="">{{item2.nickname}}<text>还差{{item2.need_text}}人</text></view>
								<!-- <view>剩余*****</view> -->
							</view>
							<view class="li-btn">去抢购</view>
						</li>
					</ul>
				</scroll-view>
			</view>

			<view class="pop-close" @click="lij">
				<image src="@/static/shop/close.png"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		goodDetail,
		allTeam
	} from "@/network/api.js"
	import zSwiper from '@/components/z-swiper/index.vue'
	export default {
		components: {
			zSwiper
		},
		data() {
			return {
				effect3d: false,
				autoplay: false,
				vertical: false,
				fullScreen: true,
				effect3dMargin: 40,
				topFloat: true,
				fotterFloat: true,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				list: [],
				// 详情id
				id: '',
				// 是否显示拼团——全部
				show: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 详情数据
				detail: {},
				// 全部待拼团
				allTeamList: [],
				video: {
					type: 'video',
					currentTime: 120, //初始帧时间---默认缓存存储
					poster: '',
					src: '',
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.rushRe()
			this.allTeamRe()
		},
		methods: {
			effect3dMarginMethed() {
				this.effect3dMargin++
			},
			setTip(type) {
				for (let item of this.list) {
					if (type) {
						item.topTip = '顶部提示语' + Math.random()
					} else {
						item.bottomTip = '底部部提示语' + Math.random()
					}
				}
			},
			switchDot() { //指示器样式切换
				let arr = ['round', 'circle', 'default', 'index', 'number', 'none']
				if (this.dotIndex < arr.length - 1) {
					this.dotIndex++
				} else {
					this.dotIndex = 0
				}
				this.mode = arr[this.dotIndex]
			},
			switchDotFLoat() { //指示器位置切换
				if (this.vertical) {
					return uni.showToast({
						title: '垂直暂支持右侧',
						icon: 'none'
					})
				}
				let arr = 'bottomCenter/topLeft/topCenter/topRight/bottomLeft/bottomRight'.split('/')
				if (this.dotFloatIndex < arr.length - 1) {
					this.dotFloatIndex++
				} else {
					this.dotFloatIndex = 0
				}
				this.indicatorPos = arr[this.dotFloatIndex]
			},
			// 获取抢购详情数据
			rushRe() {
				let data = {
					id: this.id
				}
				goodDetail(data).then(res => {
					this.detail = res.data
					let data11 = res.data.images_text.map(v => {
						return {
							type: 'image',
							src: v
						}
					})
					if (res.data.video_text != '') {
						this.video.src = res.data.video_text
						this.video.poster = res.data.vimage_text
						data11.unshift(this.video)
					}
					this.list = data11
					console.log(this.list, '轮播图数据')
				})
			},
			// 获取全部待拼团
			allTeamRe() {
				let data = {
					id: this.id
				}
				allTeam(data).then(res => {
					this.allTeamList = res.data
				})
			},
			// 开团
			gofat() {
				let data = {
					type: 1,
					number: 1,
					typee: 1,
					market: this.detail
				}
				uni.navigateTo({
					url: '/pages/subpackage/shop/qconfig?data=' + JSON.stringify(data)
				})
			},
			// 跳转拼团详情页
			goPuzzleDetail(ids) {
				let data = {
					id: ids,
					fanhtype: 1
				}
				uni.navigateTo({
					url: '/pages/subpackage/shop/puzzleDetail?data=' + JSON.stringify(data)
				})
			},
			// 关闭/打开弹框
			lij() {
				this.show = !this.show
			},
			// 跳转到全部拼团
			quanb() {
				this.show = !this.show
			},
			goPingt(item2) {
				let data = {
					type: 2,
					number: 1,
					typee: 2,
					market: item2
				}
				uni.navigateTo({
					url: '/pages/subpackage/shop/qconfig?data=' + JSON.stringify(data)
				})
			},
			lower: function(e) {
				console.log(e)
			},
      
      // 跳转到评论列表
      goToCommentList() {
        uni.navigateTo({
          url: `/pages/subpackage/shop/commentList?id=${this.id}`
        })
      }
		}
	}
</script>

<style lang="scss">
	.full {
		position: relative;

		.btns {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			z-index: 99999;
			left: 100rpx;
			top: 50rpx;
			right: 100rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			>view {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				padding: 0 20rpx;
			}

			&.full {
				position: relative;
				left: 0;
				right: 0;

				>view {
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 0 20rpx;
					background-color: rgba(0, 0, 0, 0.1);
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.shop-detail {
		background-color: #f7f7f7;

		.detail-img {
			width: 100%;
			height: 650rpx;
		}

		.detail-cont {
			padding: 10rpx 30rpx;

			// 积分
			.info {
				width: 100%;
				height: 170rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;

				.info-left {
					display: flex;
					align-items: center;

					>view:nth-child(1) {
						font-size: 24px;
						color: #e80000;
						font-family: PingFang SC, PingFang SC-Medium;
					}

					>view:nth-child(2) {
						display: flex;
						flex-direction: column;
						font-size: 20rpx;
						margin-left: 20rpx;

						>text:nth-child(1) {
							font-size:27rpx;
							// text-decoration: line-through;
						}

						>text:nth-child(2) {
							text-align: center;
							width: 78rpx;
							height: 30rpx;
							background: #ffcb80;
							border-radius: 6rpx;
						}
					}
				}

				.info-right {
					margin-top: 20rpx;
					font-size: 30rpx;
				}
			}

			// 参与拼团
			.puzzle {
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #fff;

				.puzzle-left {
					display: flex;
					margin-bottom: 10rpx;

					>text:nth-child(1) {
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: bold;
					}

					>view:nth-child(2) {
						margin-left: auto;
					}
				}

				.puzzle-right {
					display: flex;
					align-items: center;
					margin: 20rpx;
					padding-bottom: 20rpx;
					// border-bottom: 1rpx solid #F2F2F2;
					border-bottom: 1rpx solid #F2F2F2;

					>image {
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
					}

					>view:nth-child(2) {
						margin: 10rpx;

						>text:nth-child(1) {
							font-size: 30rpx;
							display: block;
						}

						>text:nth-child(2) {
							font-size: 22rpx;
							color: #F63636;
						}
					}

					>text:nth-child(3) {
						width: 114rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 30rpx;
						margin-left: auto;
						color: #fff;
						border-radius: 30rpx;
						background: linear-gradient(to right, #FD8F51, #FD3A09);
					}

				}
			}
      
      // 评论区域样式
      .comment-section {
        background-color: #fff;
        padding: 30rpx;
        margin: 20rpx 0;
        border-radius: 15rpx;
        
        .comment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30rpx;
          
          .title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          
          .view-all {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #999;
            
            text {
              margin-right: 10rpx;
            }
          }
        }
        
        .comment-empty {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 40rpx 0;
          
          text {
            font-size: 28rpx;
            color: #666;
          }
          
          .hint {
            font-size: 24rpx;
            color: #999;
            margin-top: 10rpx;
          }
        }
        
        .comment-stats {
          display: flex;
          justify-content: space-around;
          margin-top: 30rpx;
          padding-top: 30rpx;
          border-top: 1rpx solid #eee;
          
          .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .value {
              font-size: 36rpx;
              font-weight: bold;
              color: #333;
              margin-bottom: 10rpx;
            }
            
            .label {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }

			// 拼团须知
			.notice {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				background-color: #fff;

				>text {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: bold;
				}
			}

			.cont-poster {
				margin-bottom: 200rpx;
			}
		}

		.promptly {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			height: 140rpx;
			text-align: center;
			margin-top: 40rpx;
			padding: 30rpx 22rpx;
			background-color: #fff;

			>view {
				display: block;
				height: 90rpx;
				line-height: 90rpx;
				color: #fff;
				border-radius: 10rpx;
				background: linear-gradient(to right, #FD8F51, #FD3A09);
			}

			>view:active {
				background: linear-gradient(to right, #FD8F51, #FD8F51);
			}
		}

		// 弹框
		.u-mode-center-box {
			background-color: transparent !important;
		}

		.pop {
			height: 666rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background-color: #fff;

			.pop-title {
				padding: 40rpx 0;
				text-align: center;
				font-size: 36rpx;
				border-bottom: 1rpx solid #EDEDED;
				font-family: PingFang SC, PingFang SC-Bold;
			}

			.scroll-Y {
				height: 500rpx;

				.uni-scroll-view {
					.uni-scroll-view {
						.uni-scroll-view-content {





							>ul {
								margin: 0 28rpx;

								>li {
									display: flex;
									align-items: center;
									height: 90rpx;
									padding: 30rpx 0;
									border-bottom: 1rpx solid #EDEDED;

									>image {
										width: 60rpx;
										height: 60rpx;
										margin-right: 20rpx;
										border-radius: 50%;
									}

									.li-text {
										>view:nth-child(1) {
											font-size: 30rpx;
											font-family: PingFang SC, PingFang SC-Medium;

											>text {
												font-size: 24rpx;
												color: #666666;
												margin-left: 10rpx;
												font-family: PingFang SC, PingFang SC-Medium;
											}
										}

										>view:nth-child(2) {
											font-size: 24rpx;
											color: #666666;
											font-family: PingFang SC, PingFang SC-Medium;
										}
									}

									.li-btn {
										width: 130rpx;
										height: 60rpx;
										text-align: center;
										line-height: 60rpx;
										color: #fff;
										margin-left: auto;
										background: linear-gradient(270deg, #fd3a09 0%, #fd8f51 100%);
										border-radius: 3px;
									}

									.li-btn:active {
										background: linear-gradient(270deg, #fd8f51 0%, #fd3a09 100%);
									}
								}
							}
						}
					}
				}
			}
		}

		.pop-close {
			margin-top: 25rpx;
			text-align: center;

			>image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>